<template>
<BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1300" @ok="handleSubmit">
  <Description title="课程主题信息"  :column="3" :data="fromData" :schema="descItemDetailColumns" />
  <div>
    <!--引用表格-->
   <BasicTable @register="registerTable">
      <template #tableTitle>
         <a-button  type="primary" preIcon="ant-design:export-outlined" @click="wxRefund" >批量退费</a-button> 
      </template>
    </BasicTable>
  </div>
  </BasicModal>
</template>

<script lang="ts" name="cscoursetheme-csCourseTheme" setup>
  import {ref, reactive} from 'vue';
  import {BasicTable} from '/@/components/Table';
  import {BasicModal, useModalInner} from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage'
  import {refundPersonColumns, searchRefundPersonSchema,descItemDetailColumns} from '../CsCourseTheme.data';
  import {queryRefundOrderDateilList,doCourseRefund} from '../CsCourseTheme.api';
  import { Description} from '/@/components/Description/index';
  const queryParam = reactive<any>({});
  const isUpdate = ref(true);
  let fromData=ref({});
  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
      setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        fromData.value = data.record;
        queryParam.themeId = data.record.id
        console.log(queryParam)
        //隐藏底部时禁用整个表单
       //setProps({ disabled: !data?.showFooter })

  });

  //注册table数据
  const { tableContext } = useListPage({
      tableProps:{
           title: '购买科目详情',
           //dataSource:tabaleDataSource,
           api: queryRefundOrderDateilList,
           columns:refundPersonColumns,
           canResize:false,
           showActionColumn:false,
           formConfig: {
              //labelWidth: 120,
              schemas: searchRefundPersonSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
              fieldMapToNumber: [
              ],
              fieldMapToTime: [
              ],
            },
           actionColumn: {
               width: 120,
               fixed:'right'
            },
            beforeFetch: (params) => {
              return Object.assign(params, queryParam);
            },
      }
  })

  const [registerTable, {reload},{ selectedRowKeys }] = tableContext

  function wxRefund(){
      doCourseRefund({themeId:queryParam.themeId},closeDialog);
  }
  function closeDialog() {
      closeModal();
  }
   /**
    * 成功回调
    */
  function handleSuccess() {
      (selectedRowKeys.value = []) && reload();
   }
  
   
 //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await validate();
            setModalProps({confirmLoading: true});
            //提交表单
            await saveOrUpdate(values, isUpdate.value);
            //关闭弹窗
            closeModal();
            //刷新列表
        } finally {
            setModalProps({confirmLoading: false});
        }
    }

</script>

<style scoped>

</style>